<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>便民服务平台3.0</title>
    <link rel="stylesheet" href="<c:url value='/resource/css/bootstrap.css'/>">
    <link rel="stylesheet" href="<c:url value='/resource/css/style.css'/>">
    <link rel="stylesheet" href="<c:url value='/resource/css/animate.min.css'/>">

    <link rel="stylesheet" href="<c:url value='/resource/css/common.css'/>">
    <script src="<c:url value='/resource/js/jquery-1.9.1.min.js'/>"></script>
    <script src="<c:url value='/resource/js/bootstrap.min.js'/>"></script>
    <%--<script src="<c:url value='/resource/js/lib/jquery-3.1.0.js'/>"></script>--%>
    <script src="<c:url value='/resource/js/common.js'/>"></script>
    <script src="<c:url value='/resource/js/sockjs.min.js'/>"></script>
    <script src="<c:url value='/resource/js/rsa/Barrett.js'/>"></script>
    <script src="<c:url value='/resource/js/rsa/BigInt.js'/>"></script>
    <script src="<c:url value='/resource/js/rsa/RSA.js'/>"></script>
</head>
<body>
<div class="loginArea" style="margin:auto;">
    <div class="login-box lg-static">
        <div class="login-hd">
            <h1>帐号登录</h1>
            <h3>还没有帐号<a href="<c:url value="/members/to_register"/>"  target="_blank">立即注册</a></h3>
        </div>
        <div class="login-bd">
            <ul>
                <li><input name="acountId" id="acountId" type="text" class="lg-phoneNumber" placeholder="手机号码"></li>
                <li><input name="password" id="password" type="password" class="lg-password" placeholder="密码"></li>
            </ul>
            <p class="forgetPassword"><a href="javascript:void(0);" id="forgetPWD">忘记密码？</a></p>
            <div class="login-btn"><button class="btn btn-green btn-block">登 录</button></div>
        </div>
        <div class="login-ft">
            <p>第三方帐号直接登录</p>
            <a href="#" class="lg-sina">微博帐号登录</a>
            <a href="#" class="lg-qq">QQ帐号登录</a>
        </div>
    </div>

    <div class="login-box lg-quick">
        <div class="login-hd">
            <h1>扫码登录</h1>
        </div>
        <div class="login-bd">
            <div class="qrcode-img">
                <img id="qrcode" src="<c:url value='/resource/images/login-qrcode.png'/>">
            </div>
            <div style="text-align:center;color:red;" id="msg"></div>
        </div>
        <div class="login-ft">
            <h3><i></i>打开掌上公安APP，扫一扫登录更安全</h3>
        </div>
    </div>
    <div class="login-switch">
        <i class="login-quick"></i>
        <i class="login-static"></i>
    </div>
</div>

<script>
    var refresh=false;
    var PATH = "${pageContext.request.contextPath}";
    var websocket = null;
    var return_url="${return_url}";
    function setQRCode(img) {
        callAjaxGet("<c:url value='/members/to_scan_qrcode'/>",function(res){
            if(res.succ){
                refresh=false;
                $("#msg").html("");
                img.attr("src","data:image/png;base64,"+res.data);
                if (window['WebSocket']) {
                    websocket = new WebSocket("ws://" + window.location.host + PATH + '/websocket');
                }else {
                    websocket = new new SockJS(PATH + '/websocket/socketjs');
                }
                websocket.onopen = function(event) {
                    console.log('open', event);
                };
                websocket.onmessage = function(event) {
                    console.log('message', event.data);
                    if(event.data=="success"){
                        if(return_url!=""){
                            window.location.href=return_url;
                        }else{
                            window.parent.location.reload();
                        }
                    }
                    if(event.data=="timeout"){
                        refresh=true;
                        $("#msg").html("二维码已失效,点击刷新");
                    }
                };
                websocket.onclose=function(event){
                    console.log('close', event);
                }

            }else{
                toast("服务器异常");
            }
        });
    }
    $(function(){
        $(".login-switch > i:first").addClass("active");
        $(".loginArea > .login-box").not(":first").hide();
        $(".login-switch > i").unbind("click").bind("click", function(e){
            $(this).siblings().addClass("active").end().removeClass("active");
            if(e.target.className=="login-quick"){
                setQRCode($("#qrcode"));
                $(".lg-quick").show();
                $(".lg-static").hide();
            } else {
                if(websocket!=null){
                    websocket.close();
                }
                $(".lg-static").show();
                $(".lg-quick").hide();
            }
        });
        $("#qrcode").click(function () {
            if(refresh){
                setQRCode($("#qrcode"));
            }
        });
        //默认选择登录协议
        $(".i-checked").click(function(){
            if($(this).find("input").is(':checked')){
                $(this).removeClass("checked");
            }else {
                $(this).addClass("checked");
            }

        });

        $(".login-btn").click(function(){
            var password=$('#password').val();
            if($('#acountId').val()==''){
                toast("请输入账号");
                return;
            }
            if(password==''){
                toast("请输入密码");
                return;
            }
            $.ajax({
                type: 'POST',
                url: "<c:url value='/members/login'/>",
                data:JSON.stringify({
                    acountId:$('#acountId').val(),
                    password:getEncrypted(password)
                }),
                contentType: 'application/json;charset=utf-8',
                dataType:"json",
                success: function(res){
                    if(!res.succ){
                        toast(res.msg);
                    }else{
                        if(return_url!=""){
                            window.location.href=return_url;
                        }else{
                            window.parent.location.reload();
                        }
                    }
                },
                error:function(res){
                    toast("服务器异常");
                }
            });
        });
        $("#forgetPWD").click(function(){
            window.parent.location.href="<c:url value='/members/to_forget_pwd'/>";
        });
    });
    function getEncrypted(data) {
        setMaxDigits(130); //1024位就是130，2048位就是260.。。。。。。
        var key1 = new RSAKeyPair("${e}","","${n}");	//从服务端获取到的n和e可以得出公钥
        var encode_content = encodeURIComponent(data);
        var encryptData = encryptedString(key1,encode_content);
        return encryptData;
    }
</script>
</body>


</html>

